<template>
  <div class="with-mng">
    <PullRefresh v-model="pageState.refreshing"
      @refresh="refresh" class="pull-refresh">
      <CellGroup>
        <RadioGroup class="query"
          v-model:model-value="params.status">
          <CellGroup inset>
            <Cell
              :title="HANDLE_STATUS[WAIT_HANDLE]"
              clickable
              @click="params.status = WAIT_HANDLE">
              <template #right-icon>
                <Radio :name="WAIT_HANDLE" />
              </template>
            </Cell>
            <Cell
              :title="HANDLE_STATUS[ALREADY_HANDLE]"
              clickable
              @click="params.status = ALREADY_HANDLE">
              <template #right-icon>
                <Radio :name="ALREADY_HANDLE" />
              </template>
            </Cell>
          </CellGroup>
        </RadioGroup>
      </CellGroup>
      <Button type="primary" block
        :loading="state.loading"
        @click="() => { state.data = []; fetchData() }">搜索</Button>
      <Divider />
      <SkeletonCard v-if="state.loading" />
      <Empty
        v-if="!state.data.length && !state.loading" />
      <List v-model:loading="state.loading"
        :finished="pageState.finished"
        finished-text="没有更多了"
        error-text="请求失败，下拉刷新"
        :error="pageState.error"
        @load="fetchData">
        <div class="card">
          <WithdrawCard
            v-for="(record, index) in state.data"
            :key="record.withdrawalId"
            :index="index" :record="record"
            :length="state.data.length"
            @approve="handleApprove" />
        </div>
      </List>
    </PullRefresh>
  </div>
  <Modals />
</template>
<script setup lang="ts">
import {
  Button,
  Cell,
  CellGroup, Divider, Empty, List,
  PullRefresh,
  Radio,
  RadioGroup,
} from 'vant';

import SkeletonCard from '@/components/SkeletonCard.vue';

import Modals, { ModalApproveCard } from '../components';
import WithdrawCard from '../components/WithdrawCard.vue';
import { ALREADY_HANDLE, HANDLE_STATUS, WAIT_HANDLE } from '../const';
import useWithList from '../hooks/useWithList';
import type WithdrowItem from '../models/WithdrowItem';

const {
  params,
  state,
  pageState,
  fetchData,
  refresh,
} = useWithList();

const handleApprove = (record: WithdrowItem) => {
  ModalApproveCard.show({
    title: '审核通过',
    record,
    reload: () => { state.value.data = []; fetchData(); },
  });
};
</script>
<style lang="less" scoped>
.with-mng {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px;

  .query {
    margin: 10px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

.ml-auto {
  margin-left: auto;
}
</style>
